<template>
	<div class="nav_child">
		<div class="course_contant">
			<ul>
				<template v-if="!$util.isEmpty(list)">
					<li v-for="(item,index) in list" :key="index" @click="addRecruil('edit',item)">
						<p class="recruit_position">
							{{ item.title }}
							<span>{{ item.salary }}</span>
						</p>
						<div class="position_experience">
							<div>{{ item.requirements }}</div>
							<div>| {{ item.numbers }}人</div>
						</div>
						<a class="delete_expe" @click.stop="remove(item.id,index)">
							<img :src="`${constant.imgUrl}center/icon_deleuser.png`" alt />
						</a>
					</li>
				</template>
			</ul>
		</div>
		<footer class="app-footer" @click="addRecruil('add')">
			<i class="iconfont iconicon-test" />添加
		</footer>
	</div>
</template>

<script>
import $apiCompany from '@/api/company'

export default {
	name: 'recruil',
	inject: ['queryData'],
	data() {
		return {
			checked: true,
			list: [],
			constant: this.$constant
		}
	},
	created() {
		this.init()
	},
	methods: {
		init() {
			$apiCompany
				.getJob({
					company_id: this.queryData().owner_user_id
				})
				.then(res => {
					if (res.status == 'success') {
						this.list = res.data
					} else {
						uni.showToast({
							title: res.errors.message,
							icon: 'none'
						})
					}
				})
		},
		delete(id, index) {
			$apiCompany
				.deleteJob({
					id
				})
				.then(res => {
					if (res.status == 'success') {
						this.list.splice(index, 1)
					} else {
						uni.showToast({
							title: res.errors.message,
							icon: 'none'
						})
					}
				})
		},
		remove(id, index) {
			uni.showModal({
				title: '提示',
				content: '你确定要删除吗?',
				success: res => {
					if (res.confirm) {
						this.delete(id, index)
					} else if (res.cancel) {
						console.log('用户点击取消')
					}
				}
			})
		},
		addRecruil(status = 'add', item = null) {
			let query = {
				active: 6,
				status,
				id: this.$util.isEmpty(item) ? null : item.id
			}
			uni.navigateTo({
				url: `/pages/company/editRecruil${this.commonJS.queryData(query)}`
			})
		}
	}
}
</script>

<style scoped lang="scss">
	.nav_child {
		margin-top: 0;
		background: none;
	}
	.course_contant ul {
		height: auto;
		padding: 0 5% 0;
	}
	.course_contant ul li {
		box-sizing: border-box;
		width: 100%;
		height: 132px;
		margin-top: 30px;
		border-radius: 20px;
		background: white;
		position: relative;
		padding: 15px;
	}
	.recruit_position {
		font-size: 30px;
		line-height: 50px;
	}
	.recruit_position span {
		float: right;
		color: #ff6900;
	}
	.position_experience {
		font-size: 24px;
		color: #999999;
		margin-top: 8px;
		display: flex;
		& > div {
			&:nth-child(1) {
				max-width: 552px;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
				margin-right: 10px;
			}
			&:nth-child(2) {
				flex: 1;
			}
		}
	}
	.delete_expe {
        width: 60px;
        height: 60px;
        position: absolute;
        right: -20px;
    	top: -20px;
    	// float: right;
		@include direction(center, center);
	}

	.delete_expe img {
        width: 30px;
        height: 30px;
		// float: left;
	}
	.iconfont {
		font-size: 38px;
	}
</style>
